<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./lib/moment.js"></script>
</head>

<body>
    <div class="app">

    </div>

    <!-- ①引入模板js文件(不依赖jq) -->
    <!-- ②准备一个模板, 不会渲染到页面上 -->
    <script type="text/html" id="box">
        <span>{{time | fn}}</span>
    </script>
    <!-- ③定义数据(必须是一个对象) -->
    <script>
        // console.log(moment(往期的时间对象).format('YYYY-MM-DD hh:mm:ss'));
        const obj = {
            time: new Date()
        }

        template.defaults.imports.fn = function (value) {
            // console.log(value);
            // value拿到的是obj对象保存的往期的时间对象
            return moment(value).format('YYYY年/MM月/DD日 hh时:mm分:ss秒 dddd')
            // return value + 1
        };

        // ④调用模板函数 template(id选择器/不要写#, 数据/对象)  返回值是 字符串的模板,并且要渲染的数据已经在模板内
        const html = template('box', obj);

        // ⑤渲染到页面
        $('.app').html(html)
    </script>
</body>

</html>